<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        #loopDiv{
            width: 790px;
            height: 340px;
            margin: 0 auto;
            position: relative;
        }

        #list{
            list-style: none;

            position: absolute;
            bottom: 10px;
            left: 250px;
        }
        #list li{
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            background: #aaa;
            margin-right: 10px;
        }
        .chooseBut{
            width: 50px;
            height: 80px;
            background-color: rgba(0,0,0,0.2);
            color: #fff;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
            display: none;
        }
        #left{
            position: absolute;
            left: 0px;
            top: 130px;
        }
        #right{
            position: absolute;
            right: 0px;
            top: 130px;
        }
    </style>
</head>
<body>
<div id="loopDiv">
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <div id="left" class="chooseBut"><</div>
    <div id="right" class="chooseBut">></div>
</div>
<script type="text/javascript">
    const [a,b,c] = ['1',2,3];
    console.log(a)
    var jsDivBox = document.getElementById("loopDiv");
    //图片节点
    var jsImg = document.getElementById("pic");
    //左右按钮节点
    var jsLeft = document.getElementById("left");
    var jsRight = document.getElementById("right");
    //获取所有的li
    var jsUl = document.getElementById("list");
    var jsLis = jsUl.getElementsByTagName("li");
    //让第一个小圆点变为红色
    jsLis[0].style.backgroundColor = "red";

    //显示当前的图片下标
    var currentPage = 0;

    //启动定时器
    var timer = setInterval(func, 1000);
    function func() {
        currentPage++;
        changePic();

    }
    function changePic() {
        if (currentPage == 8) {
            currentPage = 0;
        }
        if (currentPage == -1) {
            currentPage = 7;
        }
        //更换图片
        //"img/1.jpg"
        jsImg.src = "image/" + currentPage + ".jpg";
        //将所有的小圆点颜色清空
        for (var i = 0; i < jsLis.length; i++) {
            jsLis[i].style.backgroundColor = "#aaa";
        }
        //改变对应小圆点为红色
        jsLis[currentPage].style.backgroundColor = "red";
    }

    //鼠标进入
    jsDivBox.addEventListener("mouseover", func1, false);
    function func1() {
        //停止定时器
        clearInterval(timer);
        //显示左右按钮
        jsLeft.style.display = "block";
        jsRight.style.display = "block";
    }
    //鼠标移出
    jsDivBox.addEventListener("mouseout", func2, false);
    function func2() {
        //重启定时器
        timer = setInterval(func, 1000);

        //隐藏左右按钮
        jsLeft.style.display = "none";
        jsRight.style.display = "none";
    }

    //点击左右按钮
    jsLeft.addEventListener("click", func3, false);
    function func3() {
        currentPage--;
        changePic();
    }
    jsLeft.onmouseover = function() {
        this.style.backgroundColor = "rgba(0,0,0,0.6)";
    }
    jsLeft.onmouseout = function() {
        this.style.backgroundColor = "rgba(0,0,0,0.2)";
    }
    jsRight.addEventListener("click", func4, false);
    function func4() {
        currentPage++;
        changePic();
    }
    jsRight.onmouseover = function() {
        this.style.backgroundColor = "rgba(0,0,0,0.6)";
    }
    jsRight.onmouseout = function() {
        this.style.backgroundColor = "rgba(0,0,0,0.2)";
    }

    //进入小圆点
    for (var j = 0; j < jsLis.length; j++) {
        jsLis[j].onmouseover = function() {
            currentPage = parseInt(this.innerHTML) - 1;
            changePic();
        };
    }

</script>
</body>
</html>